<!-- 
 * @Description: 
 * @Author: nxd
 * @Date: 2022-12-28 13:43:24
 * @LastEditors: nxd
 * @LastEditTime: 2022-12-31 14:02:50 -->
<template>
  <div class="table">
    <div class="set">
      <var-app-bar :elevation="false" color="white" title="设置" title-position="center" text-color="#000000">
        <template #left>
          <var-button @click="repersonal" color="transparent" text-color="#ffffff" round text>
            <var-icon color="#D3D3D3" name="chevron-left" :size="24" />
          </var-button>
        </template>
      </var-app-bar>
    </div>
    <var-app-bar @click="toaccount" :elevation="false" color="white" title="账号信息" title-position="left"
      text-color="#000000">
      <template #right>
        <var-button color="transparent" text-color="#ffffff" round text>
          <var-icon color="#D3D3D3" name="chevron-right" :size="24" />
        </var-button>
      </template>
    </var-app-bar>
    <br>
    <var-app-bar @click="tomisspage" :elevation="false" color="white" title="消息推送设置" title-position="left"
      text-color="#000000">
      <template #right>
        <var-button color="transparent" text-color="#ffffff" round text>
          <var-icon color="#D3D3D3" name="chevron-right" :size="24" />
        </var-button>
      </template>
    </var-app-bar>

    <var-app-bar @click="tomisspage" :elevation="false" color="white" title="语言设置" title-position="left"
      text-color="#000000">
      <template #right>
        <var-button color="transparent" text-color="#ffffff" round text>
          <var-icon color="#D3D3D3" name="chevron-right" :size="24" />
        </var-button>
      </template>
    </var-app-bar>
    <br>
    <var-app-bar @click="toname" :elevation="false" color="white" title="实名认证" title-position="left"
      text-color="#000000">
      <template #right>
        <var-button color="transparent" text-color="#ffffff" round text>
          <var-icon color="#D3D3D3" name="chevron-right" :size="24" />
        </var-button>
      </template>
    </var-app-bar>

    <var-app-bar :elevation="false" color="white" title="意见反馈" title-position="left" text-color="#000000">
      <template #right>
        <var-button @click="tofeedback" color="transparent" text-color="#ffffff" round text>
          <var-icon color="#D3D3D3" name="chevron-right" :size="24" />
        </var-button>
      </template>
    </var-app-bar>

    <var-app-bar @click="toalert" :elevation="false" color="white" title="版本更新" title-position="left"
      text-color="#000000">
      <template #right>
        <var-button color="transparent" text-color="#ffffff" round text>
          <var-icon color="#D3D3D3" name="chevron-right" :size="24" />
        </var-button>
      </template>
    </var-app-bar>

    <var-app-bar :elevation="false" color="white" title="关于数字学院" title-position="left" text-color="#000000">
      <template #right>
        <var-button @click="toaboutdco" color="transparent" text-color="#ffffff" round text>
          <var-icon color="#D3D3D3" name="chevron-right" :size="24" />
        </var-button>
      </template>
    </var-app-bar>
    <br>
    <var-app-bar :elevation="false" color="white" title="退出登录" title-position="left" text-color="red">
      <template #right>
        <var-button @click="show = true" color="transparent" text-color="#ffffff" round text>
          <var-icon color="#D3D3D3" name="chevron-right" :size="24" />
        </var-button>
        <var-dialog  message="确认要退出吗" v-model:show="show" @confirm="onconfirm" 
          />
          
      </template>
    </var-app-bar>
  </div>
  
</template>

<script setup lang="ts">
import router from '../../../router/index'
import { ref } from 'vue'
import { Snackbar } from '@varlet/ui'

const show = ref(false)
//退出登录
function onconfirm(){
  window.localStorage.clear()
  router.push('/login')
  Snackbar.success('退出成功')
}
//各种路由
function repersonal() {
  router.push('/personal')
  console.log('返回个人页面');

}
function toaboutdco() {
  router.push('/setup/aboutdco')
  console.log('关于数字学院');

}
function tofeedback() {
  router.push('/setup/feedback')
  console.log('意见反馈');

}
function toname() {
  router.push('/setup/name')
  console.log('实名认证');

}
function toalert() {
  alert('已是最新版本')

}
function toaccount() {
  router.push('/setup/account')
  
  console.log('账号信息');

}
function tomisspage() {
  router.push('/misspage')
  console.log('缺省页');

}


</script>

<style lang="less" >
.table {

  .set {
    .var-app-bar {
      height: 60px;
    }

    .var-app-bar__title {
      font-weight: 500;
      font-size: 18px
    }
  }
}
</style>